<template>
  <div class="chat-content">
    <!-- 数据加载 -->
    <div class="load-toolbar"></div>
    <!-- 聊天消息 -->
    <div v-for="item in data" :key="item.id" class="message-item">
      <div class="message-box" :class="{ right: item.float }">
        <aside class="avatar">
          <el-avatar :size="40">
            <!-- <span v-if="config.user.username">{{ config.user.username }}</span> -->
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
          </el-avatar>
        </aside>
        <main class="main-column">
          <div class="title">
            <span class="username">{{ item.user.username }}</span>
          </div>
          <div class="content">
            <div class="text">
              <span>{{ item.content }}</span>
            </div>
          </div>
        </main>
      </div>
      <div class="datetime">06-10 22:51</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ChatApi } from './chat.vue'

interface Props {
  data: ChatApi[]
}
const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
.chat-content {
  padding: 10px 15px 30px;
}
.message-item {
  .message-box {
    min-height: 30px;
    display: flex;
    .main-column {
      flex: 1;
      padding: 5px;
      div {
        display: flex;
        align-items: center;
      }
      .title {
        height: 24px;
        margin-bottom: 2px;
        font-size: 14px;
        user-select: none;
        color: #a7a0a0;
      }
      .content {
        display: flex;
        .text {
          flex-direction: row-reverse;
          color: var(--u-text-color-dark);
          background-color: var(--u-color-primary-light-7);
          // border-radius: 10px 0px 10px 10px;
          border-radius: 0px 10px 10px 10px;
          font-size: 14px;
          min-width: 30px;
          min-height: 30px;
          padding: 3px;
        }
      }
    }
    .avatar {
      padding-top: 10px;
    }
  }

  .right {
    flex-direction: row-reverse;
    .main-column {
      div {
        justify-content: flex-end;
      }
      .content {
        .text {
          border-radius: 10px 0px 10px 10px;
        }
      }
    }
  }

  .datetime {
    height: 30px;
    line-height: 30px;
    color: #ccc9c9;
    font-size: 12px;
    text-align: center;
    margin: 5px 0;
  }
}
</style>
